<template>
    <div> 
        <div class="shactop" @click="shouHuo()">
            <div class="shaptopti">
                <div>收货人：{{addList.name}}</div>
                <div>{{addList.phone}}</div>
            </div>
            <div class="shapshad">
                <div class="shapimg">
                    <img src="../assets\product/dizhi.png" alt="">
                </div>
                <div class="shopdz">收货地址：{{addList.address}}</div>
            </div>
            <div class="daishouh">(收货不方便时，可选择免费代收货服务)</div>
        </div>

        <div class="shactop" v-if="moren" @click="shouHuo()"> 
            <div class="shapshad">
                <div class="shapimg">
                    <img src="../assets\product/dizhi.png" alt="">
                </div>
                <div class="shopdz">请点击选择收货地址</div>
            </div>
        </div>
<!--  -->
<div class="shopbox2" v-for="(item,index) in carDataInfo" :key="index"  >
            <div class="shoptitl2">
                <div class="shopdainpuimg2">
                    <img src="../assets/product/shangdian.png" alt="">
                </div>
                <div class="shoptidianm2">{{item.shop_name}}</div>
            </div>

           <div v-for="(son,index) in item.list" :key="index"> 
            <div class="shopbotbox2">
                <div class="shopimg2">
                    <img :src="son.thumb" alt="">
                </div>
                <div class="shoprig2">
                    <div class="shoprigti2">{{son.title}}</div>
                     <div style="color:#666;">
                          {{son.spec}}
                        </div>
                    <div class="shopbot2">
                        <div v-if="son.is_shoppingmall_auth == 3">￥{{parseInt(son.price)}}</div> 
                        <div v-if="son.is_shoppingmall_auth == 2">{{parseInt(son.redbag_num)}}鸿包</div> 
                        <div v-if="son.is_shoppingmall_auth == 1">￥{{parseInt(son.price)}}送{{son.welfare_price}}鸿包</div> 
                        <div v-if="son.is_shoppingmall_auth == 0">￥{{parseInt(son.price)}}+{{son.redbag_num}}</div> 
                       
                        <div class="shopbotjiajian2">
                          ×{{son.count}}
                        </div> 
                    </div>
                </div>
            </div>
            <!-- <div class="shopacli">不支持7天无理由</div> 
            <div class="shopinput">
                <div>买家留言：</div>
                <input type="text" placeholder="选填：填写内容以和卖家协商确认">
            </div> -->
            <!-- <div class="shopzongji">
                <div>共计{{category.num}}件商品</div>
                <div class="shopxiaoji" v-if="category.money_type == 0">小计：<span>￥{{parseInt(category.rmb)}}+{{parseInt(category.rhb)}}鸿包</span></div>
                <div class="shopxiaoji" v-if="category.money_type == 1">小计：<span>￥{{parseInt(category.xson1)}}送{{parseInt(category.xson2)}}鸿包</span></div>
                <div class="shopxiaoji" v-if="category.money_type == 2">小计：<span>{{parseInt(category.rhb)}}鸿包</span></div>
                <div class="shopxiaoji" v-if="category.money_type == 3">小计：<span>￥{{parseInt(category.xson1)}}</span></div>  

            </div>
-->
          </div>
            <div class="shopacli">不支持7天无理由</div> 
         
        </div>
<!--  -->

    <div style="background:#fff;">
        <div class="shopinput" style="margin-top:.2rem;" >
            <div>买家留言：</div>
            <input type="text" v-model="buyerMessage" placeholder="填写内容以和卖家协商确认">
        </div> 
    </div>
        <div class="shopckbk">
            <div>运费：</div>
             <div style="color:red;">
              {{yf}}
             </div>
        </div>
         <div class="shopckbk">
            <div>消费鸿包抵扣：</div>
             <div style="color:red;">
               {{xfHb}}
             </div>
        </div>
        <div class="shopckbk">
            <div>匿名购买：</div>
            <yd-checkbox-group class="shopchebox" v-model="checkbox5" color="#F00">
                <yd-checkbox val="1">&nbsp;</yd-checkbox>
            </yd-checkbox-group>
        </div>
        <div class="shacfooter">
            <!-- <div class="shacheji" v-if="category.money_type == 0">合计：<span>￥{{parseInt(category.rmb)-(xfHb)+parseInt(yf)}}+{{parseInt(category.rhb)}}鸿包</span></div>
            <div class="shacheji" v-if="category.money_type == 1">合计：<span>￥{{parseInt(category.xson1)+(parseInt(yf))}}送{{parseInt(category.xson2)}}鸿包</span></div>
            <div class="shacheji" v-if="category.money_type == 2">合计：<span>￥{{parseInt(yf)}}+{{category.rhb}}鸿包</span></div>
            <div class="shacheji" v-if="category.money_type == 3">合计：<span>￥{{parseInt(category.xson1)+parseInt(yf)}}</span></div> -->

            <div class="shacheji">
              <span> 合计：￥{{parseInt(Rmbs)+(yf)>=xfHb?parseInt(Rmbs)+(yf):0}}+{{Hbs}}鸿包送{{Shbs}}鸿包</span>
            </div>
            <div class="footqueren" @click="pays()">确认订单</div>
        </div>
        <div class="n"></div>  
        <yd-keyboard v-model="show1s" :callback="done1" ref="keyboardDemo1"></yd-keyboard>

    </div>
</template>
<script>
import Vue from "vue";
import { CheckBox, CheckBoxGroup } from "vue-ydui/dist/lib.rem/checkbox";
Vue.component(CheckBox.name, CheckBox);
Vue.component(CheckBoxGroup.name, CheckBoxGroup);
import { Popup } from "vue-ydui/dist/lib.rem/popup";
Vue.component(Popup.name, Popup);
import {KeyBoard} from 'vue-ydui/dist/lib.rem/keyboard';
Vue.component(KeyBoard.name, KeyBoard);
export default {
  name: "shopaccountsCar",
  data() {
    return {
      show1s:false,
      show: false,
      show1: false,
      show2: false,
      spinner: 1,
      checkbox5:[],
      addList:[],
      ids:'',
      yf:0,
      xfHb:0,
      moren:false,
      a:[],
      b:[],
      c:[],
      d:[],
      Rmbs:'',
      Hbs:'',
      Shbs:'',
      tjId:'',
      tjNum:'',
      mabi:[],
      safepassword:'',
      buyerMessage:''
    };
  },
  methods: {

    pays(){
      let self = this;
      let url = "/api/safepwd"; 
			self.httpPost(url,{user_id:this.user_id,token:this.token},function(res) {
				if (res.code == 200) {   
            if(res.data == 1){
              self.show1s = true
            }else{
              self.$dialog.toast({
                  mes: '请设置安全密码！',
                  timeout: 1500
              });
               setTimeout(() => {
                    self.$router.push("/ChangePassword");
                }, 1000);
            }
				}else{
        		   alert(res.msg)
				} 
      })
    },
    done1(val) {
        console.log('输入的密码是：' + val);
        this.$dialog.loading.open('验证支付密码'); 
        if(val == this.safepassword){
           this.$dialog.loading.close();
           this.show1s = false
           this.tijiao()
        }else{
          this.$refs.keyboardDemo1.$emit('ydui.keyboard.error', '对不起，您的支付密码不正确，请重新输入。');
          this.$dialog.loading.close();
        }
    },
    back: function() {
      this.$router.go(-1);
    },
    //地址
    address:function(){ 
      let self = this;
      let url = "/api/addre/index";
			self.httpPost(url,{user_id:this.user_id,token:this.token},function(res) {
				if (res.code == 200) {   
            res.data.forEach((e,i) => {
                if(e.is_default == 1){
                    self.addList = e
                }
            });
           self.ids = self.addList.id;
          if(self.addList.length == 0){
            self.moren = true;
          }
          self.yunfei(self.ids)
				}
      })
    },
    //选择收货地址
    shouHuo(){
      this.$router.push("address_jia?id=2");
    },
    //计算
    jisuan(){
        // console.log("boss",this.carDataInfo)
        console.log("测试",this.carDataInfo)
        let self = this;
        let count = '';
        let ids = '';
        let shop_id = '';
        let spid = '';
        let Rmb = 0;
        let hb = 0;
        let shb = 0;
        let obj = [];
        let opj =[];
        let jge = '';
        let objs =[];
        this.carDataInfo.forEach((e,i) => {
          console.log(111,e,i)
          e.list.forEach((a,b)=>{
            console.log("////",a,b)
            count +='"'+a.count+'",'
            ids +='"'+a.specId+'",'
            shop_id +='"'+a.shop_id+'",'
            spid +='"'+a.id+'",'
            Rmb += a.price*a.count
            hb += a.redbag_num*a.count
            shb += a.welfare_price*a.count


            obj.push(a.id)
            opj.push(a.count)
            console.log(a.price*a.count)
            objs.push(a.price*a.count)
          })
        });
            this.mabi = objs;
            this.tjId = obj;
            this.tjNum = opj;
            this.a=count;
            this.b=ids;
            this.c=shop_id;
            this.d=spid;
            this.Rmbs=Rmb;
            this.Hbs = hb;
            this.Shbs = shb;

      console.log()
    },
    //运费
    yunfei(ids){
      let self = this;
      let url = "/api/shopping/freight";
      let data = 
        {
          user_id:this.user_id,
          token:this.token,
          shop_id:'['+ (this.c).slice(0,this.c.length-1)+']',//店铺id
          spec_id:'['+ (this.b).slice(0,this.b.length-1)+']',//商品规格id
          goods_id:'['+ (this.d).slice(0,this.d.length-1)+']',//商品id
          price: '['+ this.mabi+']' ,//商品价格d
          num:'['+ (this.a).slice(0,this.a.length-1)+']',//商品数量
          addre_id:ids,//地址id  
        }
			self.httpPost(url,data,function(res) {
        if(res.code==200){
          self.yf=res.data;
        }
      })
    },
    //消费鸿包抵扣
    xiaofeiBh(){
      let self = this;
      let url = "/api/goods/consume";
      let data = 
        {
          user_id:this.user_id,
          token:this.token,
        }
		  	self.httpPost(url,data,function(res) {
        if(res.code==200){
          self.xfHb=res.data;
        }
      })
    },

    
    //提交订单
    tijiao(){
      let self = this;
      if(!this.ids){
				this.$dialog.toast({mes:"请选择收货地址"});
        return
      } 
      let url = "/api/shopping/order";
      let data={
        user_id:this.user_id,
        token:this.token,
        id:this.tjId.join(','),//商品id
        goods_num:this.tjNum.join(','),//商品数量
        address_id:this.ids, //收货地址id
        name:this.addList.name, //收货人姓名
        mobile:this.addList.phone, //收货人电话
        type:3,//支付类型
        freight_price:this.yf,//物流费用
        buyerMessage:this.buyerMessage
      }
		  	self.httpPost(url,data,function(res) {
        if(res.code==200){
              setTimeout(() => {
                          window.location.href = 'http://hbh.dev.whbpkj.com/wx/pay/' + res.data;
              }, 500);
        }else{
          alert(res.msg)
        }
      })
    },
     //获取用户资料
    details: function() {
      let self = this;
      let url = "/api/login/detail";
      self.httpPost(url, { user_id: this.user_id, token: this.token }, function(res) {
        if (res.code === 200) {
          self.safepassword = res.data.safepassword
        }
      });
	},
  },
  created(){
     document.title="商品结算";
     this.carDataInfo = JSON.parse(localStorage.getItem("carDataInfo"));
     console.log("ass",this.category)
     this.user_id = localStorage.getItem('myid');
     this.token = localStorage.getItem('mytoken'); 
     this.xiaofeiBh();
    this.addList={
      id:this.$route.query.id,
      name:this.$route.query.name,
      phone:this.$route.query.phone,
      address:this.$route.query.address,
    }
    if(!this.$route.query.id){
     this.address(); 
    }else{
     this.ids = this.$route.query.id;

      setTimeout(() => {
          this.yunfei(this.ids)
      }, 1000);
    } 
    this.jisuan();
    this.details()
  } 
};
</script>
<style>
.top_tab1 {
  width: 100%;
  padding: 0.2rem 0.3rem;
  background: #fff;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0.01rem 0.01rem 0.06rem #ddd;
}
.top_tab1 span {
  color: #333;
  font-size: 0.36rem;
  padding-left: 0.8rem;
}
.top_tab1 .right1 {
  width: 1rem;
  display: flex;
  justify-content: space-between;
}
.top_tab1 img {
  width: 0.43rem;
}
.n {
  height: 0.93rem;
}
.shactop {
  padding: 0.3rem 0.3rem 0.3rem 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background: #fff;
  font-size: 0.3rem;
  color: #999;
  margin-bottom: 0.1rem;
}
.shaptopti {
  display: flex;
  width: 85%;
  margin-left: 15%;
  font-size: .3rem;
  justify-content: space-between;
}
.shapshad {
  margin: 0.1rem 0;
  margin-left: 5%;
  display: flex;
}
.shapimg {
 margin-right: 5%;
   /* height: 1rem;
  line-height: 1.2rem; */
}
.daishouh {
  width: 85%;
  margin-left: 15%;
  color: #ff9a9a;
  font-size: .28rem;
}
.shopbox2 {
  background: #fff;
}
.shoptitl2 {
  width: 90%;
  height: 1rem;
  line-height: 0.75rem;
  margin: 0 auto;
  border-bottom: 1px solid #ddd;
  display: flex;
}
.shopdainpuimg2 {
  line-height: 1.3rem;
  margin-right: .1rem!important;
}
.shoptidianm2 {
  line-height: 1.05rem;
  font-size: 0.3rem;
  color: #999;
}
.shopbotbox2 {
  width: 90%;
  margin: 0 auto;
  height: 2.26rem;
  line-height: 1rem;
  padding: 0.3rem 0;
  display: flex;
  justify-content: space-between;
}
.shopimg2 {
  width: 26%;
  height: 1.6rem;
}
.shopimg2 img {
  width: 100%;
  height: 100%;
}
.shoprig2 {
  width: 70%;
  display: flex;
  flex-direction: column;
  font-size: 0.26rem;
  line-height: 1.8;
  justify-content: space-between; 
}
.shoprigti2{
  font-size: 0.24rem;
    color: #666;
    display: inline-block;
    width: 100%;
    margin-top: 0.1rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.shopbot2 {
  display: flex;
  justify-content: space-between;
  color: #eb6767;
}
.shopacli {
  width: 90%;
  font-size: 0.3rem;
  color: #333;
  margin: 0.35rem auto 0;
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.3rem;
}
.shopkauidi {
  width: 90%;
  height: 0.88rem;
  line-height: 0.88rem;
  font-size: 0.3rem;
  color: #333;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  border-bottom: 1px solid #ddd;
}
.shopinput {
  width: 90%;
  height: 0.88rem;
  line-height: 0.88rem;
  margin: 0 auto;
  display: flex;
  font-size: 0.3rem;
  color: #333;
  border-bottom: 1px solid #ddd;
}
.shopinput input {
  height: 0.88rem;
  line-height: 0.88rem;
  border: none;
  flex: 1;
}
.shopdz{
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .3rem;
}
.shopzongji {
  width: 90%;
  height: 0.88rem;
  line-height: 0.88rem;
  margin: 0 auto;
  font-size: 0.3rem;
  color: #333;
  display: flex;
  justify-content: flex-end;
}
.shopxiaoji {
  margin-left: 0.3rem;
}
.shopxiaoji span {
  color: #eb6767;
}
.shopckbk {
  /* margin-top: 0.3rem; */
  height: 0.88rem;
  line-height: 0.88rem;
  background: #fff;
  font-size: 0.3rem;
  color: #333;
  padding: 0 5%;
  display: flex;
  border-bottom: 1px solid #dfdfdf;
  justify-content: space-between;
}
.shopchebox {
  line-height: 0.63rem;
}
.shacfooter {
  width: 100%;
  display: flex;
  position: fixed;
  height: 1rem;
  font-size: 0.3rem;
  background: #fff;
  bottom: 0;
  justify-content: flex-end;
  z-index: 999;
}
.shacheji span {
  color: #eb6767;

}
.shacheji{
    display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.footqueren {
  width: 2rem;
  text-align: center;
  background: #e63f3f;
  color: #fff;
  margin-left: 0.3rem;
  line-height: 1rem;
  
}
.shopshotop {
  height: 1.08rem;
  line-height: 1.08rem;
  padding-left: 5%;
  display: flex;
  border-bottom: 1px solid #ddd;
}
.shopshoimg {
  width: 0.3rem;
  height: 0.3rem;
  line-height: 1.18rem;
}
.shopshoimg img {
  width: 100%;
  height: 100%;
}
.shopshtit {
  width: 85%;
  text-align: center;
  font-size: 0.35rem;
  color: #666;
}
.shopacshjiag {
  width: 90%;
  height: 1.08rem;
  text-align: center;
  margin: 0 auto;
  line-height: 1.08rem;
  font-size: 0.35rem;
  color: #333;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
}
.shopacshjiag div:last-child {
  color: #e63f3f;
}
.shopacshfkfs {
  width: 90%;
  height: 1.08rem;
  margin: 0 auto;
  line-height: 1.08rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.35rem;
  color: #333;
  border-bottom: 1px solid #ddd;
}
.fszfb span {
  vertical-align: middle;
}
.fszfb img {
  margin-left: 0.3rem;
  vertical-align: sub;
}
.shopfkbtn {
  width: 90%;
  margin: 0 auto;
  background: #f00;
  color: #fff;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.3rem;
  text-align: center;
  margin-top: 2.5rem;
  border-radius: 0.2rem;
}
.show1tab1 {
  border-radius: 0.4rem;
}
.show1qur {
  width: 80%;
  margin: 0 auto;
  padding-top: 0.6rem;
  font-size: 0.3rem;
}
.show1tishi {
  width: 80%;
  margin: 0.4rem auto;
  font-size: 0.3rem;
  color: #999;
}
.show1queren {
  height: 0.9rem;
  line-height: 0.9rem;
  font-size: 0.3rem;
  border-top: 1px solid #999;
  text-align: center;
}
</style>
<style>
.shopckbk .yd-checkbox {
  padding: 0;
}
.yd-checkbox-text {
  display: none;
}
.accbotbox .yd-checkbox {
  line-height: 1rem;
}
.yd-spinner > input {
  color: #ed7e7e;
}
.yd-spinner-circle > span > i:after {
  top: 40%;
  left: 45%;
}
.shopbotjiajian .yd-spinner > span:last-child > i:after {
  color: #e84e4e;
}
.shopbotjiajian .yd-spinner-circle > span:last-child {
  background: #f7c5c5;
}
.shopbotjiajian2 .yd-spinner > input {
  color: #ed7e7e;
}
.shopbotjiajian2 .yd-spinner > span > i:after {
  color: #e84e4e;
}
.shopbotjiajian2 .yd-spinner-circle > span {
  background: #f7c5c5;
}
.yd-mask {
  z-index: 1;
}
</style>

